▍程式碼
<body>
<!-- 未完成作答提示 -->
<div id="custom-alert" role="alert">
<strong>注意!</strong> 您還有未作答的題目。
</div>
<div class="quiz-container">
<div id="question-navigator-wrap">
<h5>題目導覽</h5>
<div id="question-navigator">
</div>
</div>
<!-- 作答區域 -->
<div class="quiz-main-content">
...
</div>
</div>
<script>
if (document.getElementById('quiz-form')) {
const totalQuestions = quizData.length;
const navigatorDiv = document.getElementById('question-navigator');
// 產生題目導覽按鈕
function generateNavigator() {
for (let i = 1; i <= totalQuestions; i++) {
const navItem = document.createElement('div');
navItem.classList.add('nav-item');
const navLink = document.createElement('a');
navLink.classList.add('nav-link-q');
navLink.textContent = i;
navLink.id = `nav-q-${i}`;
navLink.setAttribute('data-q-index', i);
// 點擊題號滾動到對應題目
navLink.addEventListener('click', function() {
const targetId = `q-${i}`;
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
this.style.transform = 'scale(1.1)';
setTimeout(() => this.style.transform = 'scale(1)', 200);
}
});
navItem.appendChild(navLink);
navigatorDiv.appendChild(navItem);
}
}
// 更新導覽按鈕狀態
function updateNavigator(questionIndex, isAnswered, isResultMode = false, isCorrect = false) {
const navLink = document.getElementById(`nav-q-${questionIndex}`);
if (navLink) {
navLink.classList.remove('answered', 'correct-result', 'incorrect-result');
if (isAnswered) {
// 顯示已作答
navLink.classList.add('answered');
}
}
}
// 更新導覽狀態
function setupAnswerListener() {
const radioInputs = form.querySelectorAll('input[type="radio"]');
radioInputs.forEach(input => {
input.addEventListener('change', function() {
const qIndex = this.getAttribute('data-q-index');
updateNavigator(qIndex, true);
});
});
}
</body>